<template>
  <div class="order-managment-page">

    <div class="operation-bar">
      <el-button
          type="primary"
          icon="el-icon-plus"
          @click="showAddDialog"
          style="margin-right: 10px;"
      >
        添加商品
      </el-button>

      <!-- 批量删除按钮 -->
      <el-button
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelete"
          :disabled="selectedRows.length === 0"
      >
        批量删除选中订单
      </el-button>

      <!-- 搜索表单 -->
      <div class="search-area">
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="商品名称">
            <el-input
                v-model="searchForm.productName"
                placeholder="请输入商品名称"
                clearable
                max-length="50"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getOrderList">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button plain icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 2. 订单表格 -->
    <el-table
        :data="tableData"
        style="width: 100%"
        border
        empty-text="暂无订单数据"
        @selection-change="handleSelectionChange"
        row-key="orderId"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="120" align="center"></el-table-column>
      <el-table-column prop="productName" label="商品名称" min-width="180">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.productName" placement="top">
            <span class="text-ellipsis">{{ scope.row.productName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="商品数量" width="120" align="center"></el-table-column>
      <el-table-column prop="price" label="商品单价" width="140" align="center">
        <template slot-scope="scope">
          ¥{{ scope.row.price.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上架时间" width="200" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="关联用户ID" width="140" align="center"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              style="color: #F56C6C;"
              @click="handleSingleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 3. 分页控件（有数据时显示） -->
    <div class="pagination-area" v-if="total > 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>

    <!-- 4. 添加商品弹窗 -->
    <el-dialog title="添加商品" :visible.sync="addDialogVisible" width="30%">
      <el-form ref="addForm" :model="addForm" :rules="addRules">
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="addForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="quantity">
          <el-input v-model="addForm.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品单价" prop="price">
          <el-input v-model.number="addForm.price" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddProduct">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 【调整1：axios配置移到顶部，删除重复引入】
import axios from 'axios';
import Vue from 'vue'; // 引入Vue（用于挂载原型）

// 全局配置axios：处理数组参数序列化（避免orids[]格式）
axios.defaults.paramsSerializer = function(params) {
  return Object.keys(params)
      .map(key => {
        if (Array.isArray(params[key])) {
          // 数组参数转为 "key=value1&key=value2" 格式
          return params[key].map(value => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');
        }
        // 非数组参数正常序列化
        return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
      })
      .join('&');
};

// 挂载axios到Vue原型（全局可用this.$axios）
Vue.prototype.$axios = axios;

// 【调整2：组件配置按规范顺序】
export default {
  name: 'OrderManagment', // 组件名
  data() { // 数据定义（优先于生命周期和方法）
    return {
      tableData: [], // 订单列表数据
      selectedRows: [], // 表格选中的行
      total: 0, // 总数据量（分页用）
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      // 搜索表单数据（与后端参数名一致）
      searchForm: {
        productName: '', // 商品名称（模糊查询）
        userId: '', // 关联用户ID（当前登录用户）
        createTime: [] // 上架时间范围（数组：[开始时间, 结束时间]）
      },
      // 添加商品弹窗相关
      addDialogVisible: false, // 弹窗显示状态
      addForm: { // 弹窗表单数据
        productName: '',
        quantity: 1,
        price: 0
      },
      // 添加表单校验规则
      addRules: {
        productName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '数量至少为1', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { type: 'number', min: 0, message: '价格不能为负', trigger: 'blur' }
        ]
      }
    };
  },
  // 【调整3：生命周期钩子提前（mounted在methods前）】
  mounted() {
    // 页面加载时获取订单列表
    this.getOrderList();
  },
  methods: { // 所有方法统一放在methods中，按功能分类
    // 1. 表格选中事件：更新选中的行
    handleSelectionChange(val) {
      this.selectedRows = val;
    },

    // 2. 核心方法：获取订单列表（分页+筛选）
    async getOrderList() {
      try {
        // 读取本地存储的用户信息
        let userInfo = {};
        const storedUserInfo = localStorage.getItem('userInfo');
        try {
          userInfo = storedUserInfo ? JSON.parse(storedUserInfo) : {};
        } catch (parseError) {
          console.error('解析用户信息失败：', parseError);
          localStorage.removeItem('userInfo');
          this.$message.error('用户信息损坏，请重新登录');
          this.$router.push('/');
          return;
        }

        // 验证用户ID是否存在
        const loginUserId = userInfo.id;
        if (!loginUserId || isNaN(loginUserId)) {
          this.$message.warning('未获取到用户信息，请重新登录');
          this.$router.push('/');
          return;
        }
        this.searchForm.userId = loginUserId; // 回显到搜索框

        // 构造请求参数（与后端@RequestParam对应）
        const params = {
          productName: this.searchForm.productName.trim(),
          userId: this.searchForm.userId, // 添加用户ID参数
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        console.log('模糊查询订单请求参数：', params);


        // 发送请求（使用全局挂载的this.$axios）
        const res = await this.$axios.get('http://localhost:8080/api/findOrderByProductNameLike', { params });
        console.log('后端返回的订单数据：', res.data);
        // 处理响应
        if (res.data && res.data.code === 200) {
          this.tableData = res.data.data || [];
          this.total = res.data.total || this.tableData.length;
          if (this.tableData.length === 0) {
            this.$message.info('未找到匹配的订单数据');
          }
        } else {
          this.$message.error(`获取订单失败：${res.data?.msg || '未知错误'}`);
          this.tableData = [];
          this.total = 0;
        }
      } catch (error) {
        console.error('获取订单异常：', error);
        this.tableData = [];
        this.total = 0;
        if (error.response) {
          this.$message.error(`服务器错误：${error.response.status}（${error.response.data?.msg || ''}）`);
        } else if (error.request) {
          this.$message.error('网络错误：请检查后端是否启动或接口地址是否正确');
        } else {
          this.$message.error(`请求错误：${error.message}`);
        }
      }
    },

    // 3. 搜索表单重置
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.currentPage = 1; // 重置页码为1
      this.getOrderList(); // 重置后重新查询
    },

    // 4. 单行删除
    async handleSingleDelete(row) {
      // 校验订单ID
      if (!row || !row.orderId) {
        this.$message.error('订单ID缺失，无法删除');
        return;
      }

      // 确认弹窗（【修复】将product_name改为productName）
      const confirmResult = await this.$confirm(
          `确定删除订单【${row.orderId} - ${row.productName}】？删除后不可恢复！`,
          '删除确认',
          { type: 'warning' }
      ).catch(() => 'cancel');

      if (confirmResult === 'confirm') {
        try {
          const params = { id: row.orderId };
          console.log('单行删除请求参数：', params);

          const res = await this.$axios.post('http://localhost:8080/api/delete', null, { params });
          if (res.data && res.data.code === 200) {
            this.$message.success('订单删除成功！');
            this.selectedRows = []; // 清空选中状态
            this.getOrderList(); // 刷新列表
          } else {
            this.$message.error(`删除失败：${res.data?.msg || '后端未返回原因'}`);
          }
        } catch (error) {
          console.error('单行删除异常：', error);
          this.$message.error('网络错误，删除失败（请检查后端接口）');
        }
      }
    },

    // 5. 批量删除
    async handleBatchDelete() {
      // 校验是否选中订单
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选中要删除的订单');
        return;
      }

      // 校验选中订单的ID是否完整
      const invalidOrders = this.selectedRows.filter(row => !row.orderId);
      if (invalidOrders.length > 0) {
        this.$message.error(`部分订单ID缺失（共 ${invalidOrders.length} 个），请刷新后重试`);
        return;
      }

      // 确认弹窗
      const confirmResult = await this.$confirm(
          `确定删除选中的 ${this.selectedRows.length} 个订单？删除后不可恢复！`,
          '批量删除确认',
          { type: 'danger' }
      ).catch(() => 'cancel');

      if (confirmResult === 'confirm') {
        try {
          // 构造批量删除参数（数组格式）
          const params = { orids: this.selectedRows.map(row => row.orderId) };
          console.log('批量删除请求参数：', params);

          const res = await this.$axios.post('http://localhost:8080/api/batchDelete', null, { params });
          if (res.data && res.data.code === 200) {
            this.$message.success(`成功删除 ${this.selectedRows.length} 个订单！`);
            this.selectedRows = [];
            this.getOrderList();
          } else {
            this.$message.error(`批量删除失败：${res.data?.msg || '后端未返回原因'}`);
          }
        } catch (error) {
          console.error('批量删除异常：', error);
          this.$message.error('网络错误，批量删除失败（请检查后端接口）');
        }
      }
    },

    // 6. 分页：每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderList();
    },

    // 7. 分页：当前页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOrderList();
    },

    // 8. 打开添加商品弹窗
    showAddDialog() {
      this.addDialogVisible = true;
      // 弹窗打开后重置表单（避免残留上次数据）
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
    },

    async handleAddProduct() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          try {
            // 1. 获取当前登录用户ID（关联订单所属用户）
            const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
            if (!userInfo.id || isNaN(userInfo.id)) {
              this.$message.error('未获取到用户信息，请重新登录');
              this.$router.push('/');
              return;
            }

            // 2. 构造添加参数（根据后端接口调整参数名）
            const params = {
              productName: this.addForm.productName.trim(),
              quantity: this.addForm.quantity,
              price: this.addForm.price,
              userId: userInfo.id, // 关联当前登录用户
              createTime: new Date().toISOString() // 上架时间（当前时间）
            };
            console.log('添加商品请求参数：', params);

            // 修复：使用全局挂载的 this.$axios，而非局部 axios
            const res = await this.$axios.post('http://localhost:8080/api/addOrder', null, { params });

            // 4. 处理响应
            if (res.data && res.data.code === 200) {
              this.$message.success('商品添加成功！');
              this.addDialogVisible = false; // 关闭弹窗
              this.getOrderList(); // 刷新订单列表
            } else {
              this.$message.error(`添加失败：${res.data?.msg || '后端未返回原因'}`);
            }
          } catch (error) {
            console.error('添加商品异常：', error);
            this.$message.error('网络错误，添加失败（请检查后端接口）');
          }
        } else {
          this.$message.warning('请完善表单信息（如商品名称、数量）');
          return false;
        }
      });
    },
  }
}
</script>
<style scoped>
/* 操作栏：横向排列，垂直居中，溢出时自动换行 */
.operation-bar {
  display: flex;
  align-items: center;  /* 垂直居中 */
  gap: 16px;  /* 元素之间间距 */
  margin-bottom: 20px;
  flex-wrap: wrap;  /* 屏幕较小时自动换行，避免溢出 */
}

/* 搜索区域：自适应宽度，避免挤压按钮 */
.search-area {
  flex: 1;  /* 占据剩余宽度，使按钮和搜索区合理分布 */
  min-width: 500px;  /* 最小宽度，避免变形 */
  padding: 0;  /* 清除原有padding，与按钮对齐 */
  background-color: transparent;  /* 清除原有背景色，与页面融合 */
}

/* 其他原有样式保持不变 */
.pagination-area {
  margin-top: 20px;
  text-align: right;
}
.text-ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-managment-page {
  padding: 20px;
  background-color: #fff;
}
.order-managment-page {
  padding: 20px;
  background-color: #fff;
}
.operation-bar {
  margin-bottom: 20px;
}
.search-area {
  margin-top: 10px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.text-ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagination-area {
  margin-top: 15px;
  text-align: right;
}
</style>
